<script setup>
import { inject, onMounted, onUnmounted } from "vue"
import { LineLayer, Scene } from "@antv/l7"
import api from "@/axios/smart_city"

let scene, map, GlobeWind, GlobeWindlayer

async function initWindLayer() {
  let GlobeWind = await api.getGlobeWind()
  GlobeWindlayer = new LineLayer({ blend: "normal" })
    .source(GlobeWind)
    .size(1)
    .shape("arc")
    .color("#6495ED")
    .animate({
      duration: 4,
      interval: 0.2,
      trailLength: 0.6,
    })
  scene.addLayer(GlobeWindlayer)
  console.log(GlobeWindlayer)
}

onMounted(() => {
  ({ map, scene } = inject("mapScene"))
  map.flyTo({
    center: [114.3, 30.5],
    zoom: 1,
    speed: 2,
  })
  map.setProjection("mercator")
  initWindLayer()
})

onUnmounted(() => {
  map.setProjection("globe")
  scene.removeLayer(GlobeWindlayer)
})
</script>

<template></template>

<style lang="scss"></style>
